<template>
  <div class="kpi">
    <van-sticky>
      <van-nav-bar title="审批单" left-text="返回" left-arrow @click-left="returnBtn" />
    </van-sticky>
    <div class="tabbar">
      <van-tabbar v-model="active" active-color="#dfc059" :fixed="false" class="tabbar-tab"  @change="onChangeTab">
        <van-tabbar-item>
          <van-badge :content="num0" :offset="[10,-30]">
            <span class="tab-text">全部</span>
          </van-badge>
          <template #icon="props">
            <van-icon class-prefix="iconfont icon-quanbu" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <van-badge :content="num1" :offset="[5,-30]">
            <span class="tab-text">审批中</span>
          </van-badge>
          <template #icon="props">
            <van-icon class-prefix="iconfont icon-shenhezhong" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <van-badge :content="num2" :offset="[2,-30]">
            <span class="tab-text">审批通过</span>
          </van-badge>
          <template #icon="props">
            <van-icon class-prefix="iconfont icon-yishenhe" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <van-badge :content="num3" :offset="[2,-30]">
            <span class="tab-text">审批驳回</span>
          </van-badge>
          <template #icon="props">
            <van-icon class-prefix="iconfont icon-shenhebohui" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
          </template>
        </van-tabbar-item>
        
        <van-tabbar-item>
          <van-badge :content="num4" :offset="[10,-30]">
            <span class="tab-text">关闭</span>
          </van-badge>
          <template #icon="props">
            <van-icon class-prefix="iconfont icon-guanbi" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <div class="kpi-list-content">
      <div class="list">
        <van-empty image="search" description="暂无数据" v-if="list.length === 0" />
        <ul v-else>
          <li v-for="item in currentList" :key="item.id">
            <div class="list-left">
              <div class="list-top">
                <span>{{ item.approveOrderName }}</span>
                <EnumTag :enum-list="getEnumList('ApproveOrderBusinessType')" :enum-key="item.businessType" />
              </div>
              <div class="list-top list-time">
                <div style="display: flex;align-items: center;">
                  <EnumTag :enum-list="getEnumList('ApproveOrderState')" :enum-key="item.state" />
                  <div class="" style="margin-left: .625rem">创建于<DateTag :timestamp="item.createTime" /></div>
                </div>
                <div class="list-btn">
                  <van-button plain  type="primary" size="mini" style="margin-right: 0.7rem" color="#dfc059" @click="pproveOrderBtn(item.id)" v-if="item.state === '0'">我要审批</van-button>
                  <van-button plain  type="primary" size="mini" style="margin-right: 0.7rem" color="#dfc059" @click="approvalProgressBtn(item)" v-else>审批进度</van-button>
                </div>
              </div>
            </div> 
          </li>
        </ul>
      </div>
    </div>
    <van-popup v-model:show="isShowTimeline" :closeable="true" :style="{width: '100%', maxHeight: '90%'}">
      <approveTimeline :businessType="businessType" :businessId="businessId"></approveTimeline>
    </van-popup>
  </div>
  
</template>
<script setup>
import { ref, watch } from 'vue'
import {doGet} from "@/config/http";
import { useRouter } from "vue-router";

import approveTimeline from '@/h5/components/approveTimeline.vue'

const router = useRouter();
import {
  svc,
  approveOrderBusinessTypes,
  showDictKeyLabel,
  showEnumKeyLabel,
  getDictList,
  getEnumList,
  alertErrorMsg,
  showIdLabel, 
  getListPageSize
} from "@/config/common";
import useUserStore from "@/store/modules/user";
import {getH5UserId} from "@/config/cookie";

let active = ref(0)
let tableRadio = ref('')
let list = ref([])
let loading = ref(false)
let finished = ref(false)
let refreshing = ref(false)

let businessType = ref('')
let businessId = ref('')
let isShowTimeline = ref(false)
let currentList = ref([])
let num0 = ref(0)
let num1 = ref(0)
let num2 = ref(0)
let num3 = ref(0)
let num4 = ref(0)

let listQuery = ref({
  pageNum: 0,
  pageSize: 8,
  sortField: 'id',
  sortType: 'desc',
  approveId: null,
  approveOrderCode: null,
  approveOrderName: null,
  submitUserId: null,
  currentNo: null,
  currentApproveOrgId: null,
  currentApproveUserId: getH5UserId(),
  nextApproveOrgId: null,
  nextApproveUserId: null,
  approveResult: null,
  businessType: null,
  businessId: null,
  businessUrl: null,
  businessClass: null,
  createTimeStart: null,
  createTimeEnd: null,
  updateTimeStart: null,
  updateTimeEnd: null,
  state: ''
})
let radioRow = {}

let governmentList = ref([])
let organizationList = ref([])
let userList = ref([])
let expenditurePtypeList = ref([])
let expenditureFunctionalList = ref([])
let expenditureFiscalList = ref([])
let approveList = ref([])

async function initList() {
  let p1 = doGet(svc, '/approve/page', {pageSize: getListPageSize()}, false)
  let resArray = await Promise.all([p1])
  approveList.value = resArray[0]['records']
}

// 获取数据
async function getList() {
 
  loading.value = true
  doGet(svc, '/approve-order/page', {submitUserId: getH5UserId(), pageSize: getListPageSize()}).then(res => {
    loading = false
    list.value = res['records']
    num0.value = res['total']
    list.value.forEach(item => {
      switch (item.state) {
        case '0':
          num1.value += 1
          break;
        case '1':
          num2.value += 1
          break;
        case '2':
          num3.value += 1
          break;
        case '3':
          num4.value += 1
          break;
      }
    })
    onChangeTab(0)
  }).catch(e => {
    console.error(e)
    loading.value = false
  })
}
initList()
getList()
const onChangeTab = (num) => {
  switch (num) {
    case 0:
      currentList.value = list.value
      break;
    case 1:
      currentList.value = list.value.filter(item => item.state === '0')
      break;
    case 2:
      currentList.value = list.value.filter(item => item.state === '1')
      break;
    case 3:
      currentList.value = list.value.filter(item => item.state === '2')
      break;
    case 4:
      currentList.value = list.value.filter(item => item.state === '3')
      break;
  }
}
const returnBtn = () => {
    router.push({path: '/h5_home'})
  }

const pproveOrderBtn = (id) => {
  router.push({path: '/h5_approval', query: {id: id}})
}

const approvalProgressBtn = (item) => {
  businessType.value = item.businessType
  businessId.value = item.businessId
  isShowTimeline.value = true
}

const onRefresh = () => {
  // // 清空列表数据
  finished.value = false;
  listQuery.value.pageNum = 0
  list.value = []
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  getList();
};

</script>
<style>
.van-pull-refresh {
  height: 100%;
}
</style>
<style scoped lang="scss">
.kpi {
  width: 100%;
  height: 100vh;
  background-color: #ecebeb;
  // background: #fff;
  // position: absolute;
  // left: 0;
  // top: 0;
  // right: 0;
  // bottom: 0;
  // overflow-y: auto;
  // background-color: #ecebeb;
  // background: #C3C3C3;
  // --van-tabbar-z-index: 2
  // overflow: hidden;
}
.tabbar {
  // margin: .625rem 0;
  padding: .625rem 0;
}
.kpi-list-content {
  width: 100%;
  // height: 100%;
}
.tabbar-tab {
  // margin: .9375rem 0;
  padding: .9375rem 0;
}
.list {
  width: 100%;
  height: calc(100vh - 8rem);
  & ul {
    width: 100%;
    height: 100%;
    padding: 0 .625rem;
    scroll-behavior: smooth;
    overflow-y: auto;
    & li {
      border-bottom: 1px solid #C3C3C3;
      border-radius: 6px;
      margin: .625rem 0;
      background: #fff;
      padding: .625rem;
      box-shadow:0 0 5px var(--van-gray-5);
      .list-left {
       
      }
      .list-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .list-time {
        font-size: .875rem;
        margin-top: .625rem;
      }
      .list-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: .625rem;
      }
      & span {
        font-weight: bold;
        // color: #b33546;
        color: #000;
        display: inline-block;
        max-width: 80%;
        overflow: hidden;
      }
    }
  }
}
.btns {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 4rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
// .btns-a {
//   margin: 0 .625rem;
// }
// .model {
  
// }
.model-head {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 2rem;
  text-align: center;
}
.model-content {
  padding: 0 1.2rem;
}
.content {
  padding: .625rem 0;
  color: var(--van-gray-10);
  display: flex;
  // align-items: center;
}
.content span:nth-child(1) {
  display: inline-block;
  text-align: top;
  // width: 46%;
  min-width: 25%;
}
</style>

